<script lang="ts" setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useTokenStore } from '@/stores/token.js'
import { ElLoading } from 'element-plus'
const tokenStore = useTokenStore()
// 设备报修
const repairData = ref({
  deviceType: '',
  region: '',
  date: '',
  dateTime: '',
  desc: '',
})

const clearData = () => {
  repairData.value.deviceType = ''
  repairData.value.region = ''
  repairData.value.date = ''
  repairData.value.dateTime = ''
  repairData.value.desc = ''
}

const sendEmail = async () => {
  if (!tokenStore.token) {
    ElMessage.error('账号异常!')
    return
  }
  // 判断数据是否为空
  if (!repairData.value.deviceType || !repairData.value.region || !repairData.value.date || !repairData.value.dateTime || !repairData.value.desc) {
    ElMessage.error('请填写完整的信息！')
    return
  }
  try {
    // 创建加载实例
    const loadingInstance = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    let result = await axios.post('http://localhost:8088/api/sendEmail', repairData.value)
    // 关闭加载实例
    loadingInstance.close()

    if (result.data.code === 200 && result.status === 200) {
      ElMessage.success('提交报修成功！')
      clearData()
    } else {
      ElMessage.error('操作失败！')
      clearData()
    }
  } catch (error) {
    ElMessage.error('操作失败！')
    console.error(error)
    // 确保即使在 catch 中也关闭加载动画
    ElLoading.service({}).close() // 关闭所有加载动画
    clearData()
  }
}

const faceCollection = async () => {
  window.location.href = 'http://localhost:8000/faceCollection'
  // if (tokenStore.token) {
  //   try {
  //     const response = await axios.post('http://localhost:8000/faceCollection/')
  //     console.log(response.data);
  //   } catch (error) {
  //     ElMessage.error('操作失败!')
  //     console.error(error)
  //   }
  // } else {
  //   ElMessage.error('账号异常!')
  // }

}

const faceRecognition = async () => {
  window.location.href = 'http://localhost:8000/faceRecognition'
  // if (tokenStore.token) {
  //   try {
  //     const response = await axios.post('http://localhost:8000/faceRecognition/')
  //     console.log(response.data)
  //   } catch (error) {
  //     ElMessage.error('操作失败!')
  //     console.error(error)
  //   }
  // } else {
  //   ElMessage.error('账号异常!')
  // }

}

const carRecognition = async () => {
  window.location.href = 'http://localhost:8000/carRecognition'
  // if (tokenStore.token) {
  //   try {
  //     const response = await axios.post('http://localhost:8000/carRecognition/')
  //     console.log(response.data)
  //   } catch (error) {
  //     ElMessage.error('操作失败!')
  //     console.error(error)
  //   }
  // } else {
  //   ElMessage.error('账号异常!')
  // }

}
</script>

<template>

  <el-row :gutter="10">
    <el-col :span="12">
      <!-- 左边上 -->
      <el-card class="device">
        <span>——设备报修——</span>
        <el-form :model="repairData" label-width="auto" style="max-width: 600px;margin-top: 10px" size="small;">
          <el-form-item label="设备类型：">
            <el-select v-model="repairData.deviceType" placeholder="请选择设备类型">
              <el-option label="消防柜" value="消防柜" />
              <el-option label="消防栓" value="消防栓" />
              <el-option label="信访箱" value="信访箱" />
              <el-option label="路灯" value="路灯" />
              <el-option label="公告栏" value="公告栏" />
              <el-option label="纯净水桩" value="纯净水桩子" />
            </el-select>
          </el-form-item>
          <el-form-item label="区域：">
            <el-select v-model="repairData.region" placeholder="请选择设备所在区域">
              <el-option label="A区" value="A区" />
              <el-option label="B区" value="B区" />
              <el-option label="C区" value="C区" />
              <el-option label="D区" value="D区" />
              <el-option label="E区" value="E区" />
              <el-option label="F区" value="F区" />

            </el-select>
          </el-form-item>
          <el-form-item label="申报时间：">
            <el-col :span="11">
              <el-date-picker v-model="repairData.date" type="date" placeholder="选择日期" style="width: 100%" />
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
              <el-time-picker v-model="repairData.dateTime" placeholder="选择时间" style="width: 100%" />
            </el-col>
          </el-form-item>

          <el-form-item label="说明：">
            <el-input v-model="repairData.desc" type="textarea" :rows="4" placeholder="请描述问题具体信息" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="sendEmail">提交</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 左边下 -->
      <el-card style="" class="items">
        <span>——信息录入——</span>
        <div class="item1">
          <el-button type="primary" size="large" @click="faceCollection">人脸录入</el-button>
          <el-button type="success" size="large" @click="faceRecognition">人脸认证</el-button>
          <el-button type="warning" size="large" @click="carRecognition">车牌验证</el-button>
        </div>
      </el-card>
    </el-col>

    <!-- 右边 -->
    <el-col :span="12">
      <el-card class="notice">
        <span>——公告栏——</span>
        <br>
        <ul>
          <li><b>工作安全培训通知：</b>本周六上午9点至11点在物业101办公室举行安全培训。请所有工作人员务必参加，培训内容包括消防安全、急救技能和设备操作安全等。</li>
          <el-divider />
          <li><b>设备维护计划公告：</b>根据年度维护计划，我们将在下周一对小区的电梯进行例行检查和维护。届时，部分电梯可能会暂时停用，请提前通知居民并做好相应的工作安排。</li>
          <el-divider />
          <li><b>环境卫生管理规定：</b>为了保持小区的清洁和整洁，请大家严格遵守环境卫生管理规定。包括但不限于：定期清理垃圾、不随意丢弃废弃物、监督居民垃圾分类等。</li>
          <el-divider />
          <li><b>员工行为规范提醒：</b>我们再次提醒所有员工遵守公司的行为规范，包括但不限于：着装整洁、言语礼貌、对待居民和同事要有耐心和尊重。请记住，你们的行为代表着公司的形象。</li>
          <el-divider />
          <li><b>紧急联系方式更新：</b>为了确保在紧急情况下能够迅速联系到相关人员，我们更新了紧急联系方式列表。请各部门负责人确认并更新你们的联系方式，确保信息的准确性和时效性。</li>
          <el-divider />
          <!-- <li><b>节日值班安排通知：</b>请各部门根据排班表做好工作交接，并确保节日期间小区的安全和正常运行。</li> -->
        </ul>
      </el-card>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.device {
  width: 100%;
  max-width: 655px;
  height: auto;
  text-align: center;
  margin-bottom: 10px; // 添加间距
}

.items {
  width: 100%;
  max-width: 655px;
  height: auto;
  text-align: center;
}

.item1 {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 5px 0px 10px 0px;
  padding-top: 20px;
}

.notice {
  width: 100%;
  max-width: 640px;
  height: auto;
  float: left;
  margin-left: 15px;
  padding-bottom: 10px;
  text-align: center;
}

.el-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.el-col {
  border-radius: 4px;
  flex: 1;

  &:first-child {
    margin-right: 10px; // 添加间距
  }
}

.grid-content {
  border-radius: 4px;
  min-height: 610px;
}

span {
  font-family: 字魂扁桃体;
  font-size: 18px;
}

ul {
  list-style: none;
  text-align: left;
  padding-left: 20px; // 添加左侧内边距
}

ul li {
  padding: 2px 0px 4px 2px;
  font-size: 13px;
}

.el-card {
  overflow: hidden; // 隐藏内部滚动条
}

.el-date-editor {
  width: 100%; // 确保日期选择器占据整个空间
}

.el-time-editor {
  width: 100%; // 确保时间选择器占据整个空间
}
</style>